import { memo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Space, Divider, Tag, Modal, message } from 'antd'
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
  StarFilled,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import { useNavigate, Link } from 'react-router-dom'
import { questionListItemType } from '@/types'
import { api_updateQuestionById, api_copyQuestionById } from '@/api'
import { useRequest } from 'ahooks'

const QuestionCard = memo((props: questionListItemType) => {
  const { _id, title, isPublished, isStar, answerCount, creatAt } = props
  const nav = useNavigate()

  const [modal, contextHolder] = Modal.useModal()

  const delHandle = () => {
    modal.confirm({
      icon: <ExclamationCircleOutlined />,
      content: '是否删除该问卷？',
      onOk: handleDel,
    })
  }

  // 收藏&取消收藏
  const [isStarState, setIsStarState] = useState(isStar)
  const { run: handleChangeStar } = useRequest(
    async () => {
      await api_updateQuestionById(_id, { isStar: !isStarState })
    },
    {
      manual: true,
      onSuccess: () => {
        setIsStarState(!isStarState)
      },
    }
  )

  // 删除问卷
  const [isDelState, setIsDelState] = useState(false)
  const { run: handleDel } = useRequest(
    async () => {
      await api_updateQuestionById(_id, { isDelete: true })
      message.success('删除成功')
    },
    {
      manual: true,
      onSuccess: () => {
        setIsDelState(true)
      },
    }
  )

  // 复制问卷
  const { run: handleCopy } = useRequest(async () => await api_copyQuestionById(_id), {
    manual: true,
    onSuccess: res => {
      message.success('复制成功')
      nav(`/question/edit/${res.id}`)
    },
  })

  if (isDelState) return null

  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <div className={styles.left}>
          <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
            <Space>
              {isStarState && <StarFilled style={{ color: 'red' }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            {(isPublished && <Tag color="#2db7f5">已发布</Tag>) || <Tag>未发布</Tag>}
            <span>答卷：{answerCount}</span>
            <span>{creatAt}</span>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: '12px' }} />
      <div className={styles['button-container']}>
        <div className={styles.left}>
          <Space>
            <Button
              type="text"
              size="small"
              icon={<EditOutlined />}
              onClick={() => nav(`/question/edit/${_id}`)}
            >
              编辑问卷
            </Button>
            <Button
              type="text"
              size="small"
              icon={<LineChartOutlined />}
              onClick={() => nav(`/question/stat/${_id}`)}
              disabled={!isPublished}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Button
            onClick={handleChangeStar}
            type="text"
            size="small"
            icon={isStarState ? <StarFilled style={{ color: 'red' }} /> : <StarOutlined />}
          >
            {isStarState ? '取消收藏' : '收藏'}
          </Button>
          <Button onClick={handleCopy} type="text" size="small" icon={<CopyOutlined />}>
            复制
          </Button>
          <Button type="text" size="small" icon={<DeleteOutlined />} onClick={delHandle}>
            删除
          </Button>
        </div>
      </div>
      {contextHolder}
    </div>
  )
})

export default QuestionCard
